<template>
  <el-card  shadow="never" class="aui-card--fill">
    <el-button type="primary" @click="returnHome()">返回首页</el-button>
    <div class="content">

          <p class="title">
            <span v-html="dataForm.noticeTopic">
              
            </span>
          </p>
      
          <p class="to">
            <span v-if="dataForm.target==0">
              全体用户:
            </span>
            <span v-if="dataForm.target==1">
              学生:
            </span>
            <span v-if="dataForm.target==2">
              全体教职工:
            </span>
          </p>

      
          <div class="MainContent" > 
            <!-- {{ dataForm.noticeContent }} -->
            <mavon-editor :toolbars="markdownOption" :box-shadow="false" v-model="dataForm.noticeContent" :subfield="false" style="border: 0;z-index: 0;"
              preview-background="#FFF" default-open="preview" />  


          </div>
          <div class="attatch">
            <p>
              附件：
            </p>
            <div>
                <!-- <file-down 
                v-for="item in noticefiles" :key="item.id"
                api-url="/common/down/notice" :file-id="item.id"
                :FileInfo="item"
                class="delFile" type="text" icon="" 
                :title="item.filename + `.` + item.suffix" ></file-down> -->

                <file-down :pre-view="true" v-for="item in noticefiles" :key="item.id" api-url="/common/down/notice" :file-id="item.id" :FileInfo="item"
                  class="delFile" type="text" icon="" :title="item.filename + `.` + item.suffix"></file-down>
                <!-- <el-button class="delFile" type="text" v-for="item in noticefiles" @click="download(item)" :key="item.id">{{ item.filename+`.`+item.suffix }}</el-button> -->
            </div>
          </div>

          <p class="date">
            <span >
              {{ dataForm.createtime}}
            </span>
          </p>
    </div>
  </el-card>
</template>

<script>
import FileDown from '@/components/FileDown.vue'
import servicesApi from '@/services/servicesApi'
export default {
  components: { FileDown },
  data() {
      return {
        browseTime: 0,  // 浏览时长初始值为 0
        msg: '',
      clearTimeSet: null, 
          visible: false,
          markdownOption: {
              toolbarsFlag: false,
              subfield: false
          },
          noticefiles: [{}, {}, {}],
          filename: '文件名',
          date: '',
          dataForm: {
              id: '',
              noticeTopic: '',
              target: null,
              noticeContent: '',
              createtime: '',
          },
          row: null,
      };
  },
  created() {
      this.dataForm.id = this.$route.params.id || 0;
      this.row = this.$route.params.notice
      // console.log('动态添加路由传入参数%o', this.$route.params.notice)
      // if(this.dataForm.id){
      Promise.all([
          // console.log('获取公告详情'),
          this.getInfo()
      ]).then(() => {
        
      });
      // }else{
      //   // console.log('新增公告')
      // }
  },
  mounted() {
    this.setTime(); // 页面加载完成后开始计时
  },
  beforeDestroy() {
 	clearInterval(this.clearTimeSet); // 离开页面后清除定时器
 	// this.addBrowseRecord(); // 上送后台接口，将浏览时长等信息传到后台，离开当前路由后调用
 },

  methods: {
    setTime() {
     //设置定时器
     this.clearTimeSet = setInterval(() => {
       this.browseTime++;
      //  console.log(this.browseTime, '时长累计');
     }, 1000);
   },
      //下载文件
      download(row) {
          // console.log(row)
          let Form = {
              filename: 'xss攻击与防御总结',
              path: 'student/paper',
              suffix: 'docx'
          };
          let FileName = 'xss攻击与防御总结.docx';
          if (row) {
              Form.filename = row.filename;
              Form.path = row.path;
              Form.suffix = row.suffix;
              FileName = Form.filename + '.' + Form.suffix;
          }
          //按钮置灰 不可点击
          this.isDisabled = true;
          servicesApi.downloadFiles(Form).then(res => {
              try {
                  const blob = new Blob([res.data], {
                      type: 'application/octet-stream'
                  });
                  const downloadElement = document.createElement('a');
                  // 创建下载的链接
                  // 兼容不同浏览器的URL对象
                  const url = window.URL || window.webkitURL || window.moxURL;
                  const href = url.createObjectURL(blob);
                  downloadElement.href = href;
                  // 下载后文件名
                  downloadElement.download = FileName;
                  document.body.appendChild(downloadElement);
                  // 点击下载
                  downloadElement.click();
                  // 下载完成移除元素
                  document.body.removeChild(downloadElement);
                  // 释放掉blob对象
                  url.revokeObjectURL(href);
                  //编译文件完成后，进度条展示为100
                  this.percentage = 100;
                  //下载完成 可以重新点击按钮下载
                  this.isDisabled = false;
              }
              catch (error) {
                  // console.log('下载的文件出错', error)
              }
          }).catch(error => {
              // console.log('下载的文件出错', error)
          });
      },
      // 获取信息
      getInfo() {
          servicesApi.getNoticeInfoById(this.dataForm.id).then(res => {
              if (res.data.code !== 200) {
                  return this.$message.error(res.data.msg);
              }
              // this.dataForm = {
              //   ...this.dataForm,
              //   ...res.data.data
              // }
              this.noticefiles = res.data.data.noticefiles;
              this.dataForm = res.data.data.notice;
              this.dataForm.noticeTopic = this.row.noticeTopic
             this.dataForm.noticeContent = this.row.noticeContent
              // console.log(this.noticefiles) 
              // console.log(this.dataForm)
              let strArr = this.dataForm.createtime.split('-');
              let str = (strArr[0] + '年' + strArr[1] + '月' + strArr[2] + '日');
              this.dataForm.createtime = str.toString();
              // console.log(this.dataForm.createtime)
          });
      },
      // 返回
      returnHome() {
        
        clearInterval(this.clearTimeSet); // 离开页面后清除定时器
        // console.log(this.clearTimeSet, '时长');
        let pageInfo = {
             msg: '公告id*:'+this.dataForm.id+',预览时间:'+this.browseTime,
            // time: this.browseTime,
      }
    
        
      servicesApi.postNoticeInfoById(pageInfo).then(res => {
              if (res.data.code !== 200) {
                  return this.$message.error(res.data.msg);
              }
              // console.log(this.msg)
              // this.dataForm = {
              //   ...this.dataForm,
              //   ...res.data.data
              // }
              // this.noticefiles = res.data.data.noticefiles;
              // this.dataForm = res.data.data.notice;
              // console.log(this.noticefiles)
              // console.log(this.dataForm)
              // let strArr = this.dataForm.createtime.split('-');
              // let str = (strArr[0] + '年' + strArr[1] + '月' + strArr[2] + '日');
              // this.dataForm.createtime = str.toString();
              // console.log(this.dataForm.createtime)
          });
 	// this.addBrowseRecord(); // 上送后台接口，将浏览时长等信息传到后台，离开当前路由后调用
          let tab = this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1];
          this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => {
              if (item.name === tab.name || item.name === 'Admin-notice') {
                  return false;
              }
              return true;
          });
          // let tab1 = this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1]
          // // console.log(tab)
          this.$router.push({
              // name: tab1.name,
              name: 'home',
              // params: { ...tab.params },
              // query: { ...tab.query }
          });
      }
  },
    
}
</script>
<style scoped>
.delFile{
  color:#7f53a8;
  text-decoration: underline;
  display:  block;
  text-align: left;
  text-indent: 28px;
  margin-left: 10px;
  /* width: 400px; */
}
.to{
  /* font-size: px; */
  text-align: left;
}
.MainContent{
  text-align:justify;
  text-indent: 28px;
  /* font-size: 24px; */
  z-index: -1;
}
.attatch {
  display: inline;
  text-align: left;
  /* text-indent: 28px; */
  /* font-size: 24px; */
  z-index: -1;
}
.date{
  /* font-size: 24px; */
  font-family: 仿宋_GB2312;
  text-align: right;
  float: right;
}
.title{
  font-family: 小标宋;
  font-size: 19px;
  text-align: center;
}
.content{
  width: 100%;
  height: auto;
  overflow: hidden;
  margin: 25px auto;
  border: 1px solid #ddd;
  padding: 20px;
  font-family: 仿宋_GB2312;
}
</style>